<template>
  <div class="app">
    <div class="box">
      <p class="p1"><span class="span1">丸犊子</span></p>
      <span class="span2">综合管理平台</span>
      <span class="span3">小微企业高效管理</span>

<el-form class="nb" :model="userinfo" :rules="rules" ref="formRef" label-width="100px">
      <el-form-item  prop="username" class="div1">
        <i class="el-icon-s-custom"></i>
          <el-input clearable placeholder="请输入系统账号" type="text" v-model="userinfo.username" autocomplete="off" />
        </el-form-item>

        <el-form-item  prop="password" class="div2">
        <i class="el-icon-lock"></i>
          <el-input show-password clearable placeholder="请输入密码" type="text" v-model="userinfo.password" autocomplete="off" />
        </el-form-item>

        <el-form-item>
          <el-button  type="primary" @click="submitForm">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { CellGroup } from 'iview'
export default {
  data() {
    return {
      userinfo: {
        username: 'admin',
        password: 'admin',
      },
    }
  },
  computed: {
    rules() {
      return {
        username: [
          // { required: true, message: '账号不能为空' },
          { validator: this.validateUsername, trigger: ['blur', 'change'] },
        ],
        // password: [{ required: true, message: '密码不能为空' }],
      }
    },
  },
  // Created(){
  //   this.$router.go(0)
  // },
  methods: {
    // 自定义验证规则
    validateUsername(rule, value, callback) {
      if (/^z/i.test(value)) {
        callback(new Error('关键出现了'))
      } else {
        callback()
      }
    },
    // 表单提交
    submitForm() {
      this.$refs['formRef'].validate(async (valid) => {
        if (valid) {
          //验证成功
          // console.log(this.userinfo)
          // 它有返回值，返回promise
          
          let ret = await this.$store.dispatch('cont/loginAction', this.userinfo)
          console.log(ret);
          if (!ret) {
            this.$message.error('账号或密码不正确')
          } else {
            // 到后台首页
            this.$router.replace('/admin/welcome').catch(() => {})
          }
        } else {
          this.$message.error('账号或密码不正确')
          return false
        }
      })
    },
  },
}
</script>






<style lang="scss" scoped>


::v-deep{
  .el-input__inner{
    border: none;
    height: 68%;
  }
}


.el-input {
  position: absolute;
  right: 0px;
  top: 8px;
  width: 300px;
  
}

i{
    position: absolute;
    left: -100px;
    top: 15px;
    font-size: 30px;
}
input::-webkit-input-placeholder {
  color: rgb(153, 153, 153);
}

.box {
  background-color: #fff;
  width: 434px;
  height: 472px;
  border-radius: 5px;
  position: relative;
  text-align: center;
}
.app {
  width: 100%;
  height: 730px;
  background-color: rgba(99, 185, 190, 1);
  display: flex;
  justify-content: center;
  align-items: center;
}
.p1 {
  background-color: rgba(99, 185, 190, 1);
  position: absolute;
  left: 104px;
  top: 39px;
  width: 234px;
  height: 48px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.p2 {
  position: absolute;
  left: 326px;
  top: 357px;
  width: 57px;
  height: 20px;
  color: #63b9be;
  font-size: 13px;
  cursor: pointer;
}
.span2 {
  position: absolute;
  left: 119px;
  top: 109px;
  width: 205px;
  height: 40px;
  font-size: 34px;
}
.span3 {
  position: absolute;
  left: 157px;
  top: 168px;
  width: 129px;
  height: 19px;
  font-size: 16px;
  color: #999999;
}
button {
  position: absolute;
  left: -50px;
  top: 395px;
  width: 337px;
  height: 48px;
  background: inherit;
  background-color: rgba(99, 185, 190, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(99, 185, 190, 1);
  border-radius: 5px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-size: 18px;
  color: #ffffff;
  cursor: pointer;
}
button:hover {
  font-weight: 900;
}
.div1 {
  position: absolute;
  left: 50px;
  top: 227px;
  width: 333px;
  height: 48px;
  border-bottom: 1px solid;
  border-color: rgba(228, 228, 228, 1);
}
.div2 {
  position: absolute;
  left: 50px;
  top: 299px;
  width: 333px;
  height: 48px;
  border-bottom: 1px solid;
  border-color: rgba(228, 228, 228, 1);
}
</style>